<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="test"></div>
    <script src="./js/browser.js"></script>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script type="text/babel">
      let dom = document.querySelector("#test");
      
      class LiItem extends React.Component{
        constructor(...args){
          super(...args);
          this.state={
            css:{color:"red",fontWeight:700}
          }
          this.fn = this.fn.bind(this);
        }
        fn(){
          this.setState(
            {
              css:{color:"pink"}
            }
          )
        }
        render(){
          return <li><span style={this.state.css}>姓名:{this.props.data.name}</span>
                    <button type="button" onClick={this.fn}>变色</button> 
                    <br/>
                    年龄:{this.props.data.age}
                  </li>
        }
      }
      
      class List extends React.Component{
        constructor(...args){
          super(...args);
          this.state={
          };
        }
        render(){
          return <div>
                  <ul>
                    {this.props.data.map((v,index)=><LiItem key={index} data={v}></LiItem>)}
                  </ul>
                </div>
          ;
        }
      }
      ReactDOM.render(<List data={[{name:"myth",age:"12"},{name:"myth2",age:"16"},{name:"myth3",age:"19"},]}></List>,dom);
    </script>
  </body>
</html>